// components/progress/progress.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    width: {
      type: String,
      value: '100%'
    },
    percentage: {
      type: Number,
      value: 0
    },
    color: {
      type: String,
      value: '#fca400'
    },
    showText: {
      type: Boolean,
      value: true
    },
    textInside: {
      type: Boolean,
      default: false
    },
    strokeWidth: {
      type: Number,
      value: 16
    },

    value: {
      type: String,
      value: ''
    },
    backColor: {
      type: String,
      value: 'transparent'
    },
    borderRadius: {
      type: Number,
      value: 0
    },
    radiusType: {
      type: String,
      value: 'left'
    },
    textColor: {
      type: String,
      value: '#000000'
    },
    mode: {
      type: String,
      value: 'line'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    activeRadius: ''
  },
  observers: {
    'strokeWidth': function (selectIndex) {
      // 在 rate被设置时，执行这个函数

    },
    'percentage'(val) {},
    'borderRadius': function (val) {
      const {
        radiusType
      } = this.data
      var activeRadius = ''
      if (radiusType == 'left') {
        activeRadius = '' + val + 'rpx 0 0 ' + val + 'rpx'
      }
      this.setData({
        activeRadius
      })
    },
    'radiusType': function (val) {
      const {
        borderRadius
      } = this.data
      var activeRadius = ''
      if (val == 'left') {
        activeRadius = '' + borderRadius + 'rpx 0 0 ' + borderRadius + 'rpx'
      } else if (val == 'right') {
        activeRadius = '0 ' + borderRadius + 'rpx ' + borderRadius + 'rpx 0'
      } else if (val == 'all') {
        activeRadius = '' + borderRadius + 'rpx'
      }
      this.setData({
        activeRadius
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    content() {
      if (typeof this.data.format === 'function') {
        return this.data.format(this.data.percentage) || '';
      } else {
        return `${this.data.percentage}%`;
      }
    }
  }
})